<template>
  <view class="content" :style="'margin: 10px; width: ' + (pageWidth - 20) + 'px; height: ' + (pageHeight - 20) + 'px;'">
    <view class="body-block pd-20 pt-30 pb-30">
      <view class="title-block"><view class="title-icon mr-30" style="background-color: #03B3FD;"></view>操作票类型</view>
      <view class="list-block">
        <view :class="activeIndex == index ? 'item-block-active' : 'item-block'" v-for="(item, index) in list" :key="index" @click="changeType(item.label, item.value, index)">{{item.label}}</view>
      </view>
      <view class="button-block mt-100">
        <button class="button" @click="routeToCreate">开始填写操作票</button>
      </view>
    </view>
  </view>
</template>

<script>
  import { getUserInfoApi } from '@/apis/auth/index.js'
  import { getDictListApi } from '@/apis/work/common.js'
  import { setUserInfo } from '@/utils/auth.js'
  
  export default {
    data() {
      return {
        pageWidth: uni.getSystemInfoSync().windowWidth,
        pageHeight: uni.getSystemInfoSync().windowHeight,
        list: [
          {label:'电气第一种工作票'},
          {label:'电气第二种工作票'},
          {label:'热控工作票'},
          {label:'热力机械工作票'},
          {label:'其他工作票'},

        ],
        activeIndex: 0,
        activeName: '',
        activeType: ''
      }
    },
    onShow() {
      // this.getUserInfo()
      // this.getWorkTypeList()
    },
    methods: {
      getUserInfo: function() {
        getUserInfoApi().then(res => {
          setUserInfo(res)
        }).catch(err => console.warn(err))
      },
      getWorkTypeList: function() {
        getDictListApi('licence_type').then(res => {
          this.activeType = this.activeType ? this.activeType : res[0].value
          this.list = res
        }).catch(err => console.warn(err))
      },
      changeType: function(name, type, index) {
        this.activeName = name
        this.activeType = type
        this.activeIndex = index
      },
      routeToCreate: function() {
        uni.navigateTo({ url: `/operationorder/Operationticketpublic` })
        console.log('this.activeType', this.activeType)
        // if (this.activeType == '1') {
        //   uni.navigateTo({ url: `/pagesWork/workCreateHot?type=${this.activeType}` })
        // } else if (this.activeType == '2') {
        //   uni.navigateTo({ url: `/pagesWork/workCreateSpace?type=${this.activeType}` })
        // } else if (this.activeType == '3') {
        //   uni.navigateTo({ url: `/pagesWork/workCreateBlindPlate?type=${this.activeType}` })
        // } else if (this.activeType == '4') {
        //   uni.navigateTo({ url: `/pagesWork/workCreateHigh?type=${this.activeType}` })
        // } else if (this.activeType == '5') {
        //   uni.navigateTo({ url: `/pagesWork/workCreateHoisting?type=${this.activeType}` })
        // } else if (this.activeType == '6') {
        //   uni.navigateTo({ url: `/pagesWork/workCreateElectric?type=${this.activeType}` })
        // } else if (this.activeType == '7') {
        //   uni.navigateTo({ url: `/pagesWork/workCreateDigging?type=${this.activeType}` })
        // } else if (this.activeType == '8') {
        //   uni.navigateTo({ url: `/pagesWork/workCreateRoad?type=${this.activeType}` })
        // } else {
        //   uni.showToast({ title: `未找到${this.activeName}作业页面`, icon: 'none' })
        // }
      }
    }
  }
</script>

<style>
  page {
    background-color: #EFEFEF;
  }
</style>

<style lang="scss" scoped>
  .content {
    background-color: #FFFFFF;
    border-radius: 10rpx;
    .body-block {
      .title-block {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        line-height: 40rpx;
        font-weight: 500;
        color: #333333;
        .title-icon {
          width: 15rpx;
          height: 15rpx;
          border-radius: 100%;
        }
      }
      .list-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        .item-block {
          width: 300rpx;
          height: 72rpx;
          border-radius: 40rpx;
          border: 1rpx solid #666666;
          font-size: 30rpx;
          color: #666666;
          background-color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 50rpx;
        }
        .item-block-active {
          @extend .item-block;
          color: #FFFFFF;
          border-color: #03B3FD;
          background-color: #03B3FD;
        }
      }
      .button-block {
        display: flex;
        justify-content: center;
        .button {
          width: 415rpx;
          height: 80rpx;
          border-radius: 10rpx;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #19BE6B;
          color: #FFFFFF;
        }
        .button::after {
          border: none;
        }
      }
    }
  }
</style>